<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>创作中心</title>

<!--editor.md-->
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>

<!-- Bootstrap -->
<link th:href="@{/css/bootstrap.css}" rel="stylesheet">
</head>
<body style="background-color: #f8f8f8;">

<div th:replace="~{commons::navbar('write')}"></div>


<div class="container">
<div style="background-color: white">
    <div th:replace="~{commons::usermanage('add')}" class="row">
        <ul class="nav nav-tabs">
            <li role="presentation"><a href="#">管理博客</a></li>
            <li class="active" role="presentation"><a href="#">添加博客</a></li>
            <li role="presentation"><a href="#">管理标签</a></li>
            <li role="presentation"><a href="#">我的收藏</a></li>
            <li role="presentation"><a href="#">我的点赞</a></li>
            <li role="presentation"><a href="#">我的资料</a></li>
        </ul>
    </div>
    <div class="row">
        <main role="main" class="col-xs-12" style="padding: 10px 10px 10px 10px;">
            <div style="background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);padding: 0px 10px 10px 10px">
                <h3 style="margin-left: 20px" th:text="${article==null?'添加博客':'编辑博客'}">编辑博客</h3>
                <a th:href="@{/user/phone}" style="background-color: white;border: #0084ff solid 1px;color: #0084ff" type="button" class="btn">小屏幕编辑点我</a>
                <form class="form-horizontal" th:action="@{${article==null?'/user/addArticle':'/user/updateArticle'}}" method="post"
                      enctype="multipart/form-data">
                    <input hidden="hidden" type="text" name="id" th:value="${article!=null?article.getId():'0'}">
                    <div class="form-group" style="margin-top: 10px">
                        <label for="inputEmail3" class="col-sm-2 control-label">文章标题</label>
                        <div class="col-sm-6">
                            <input name="title" th:value="${article==null?'':article.getTitle()}" class="form-control" id="inputEmail3" placeholder="请输入标题...">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputFile" class="col-sm-2 control-label">封面图片</label>
                        <div class="col-sm-6">
                            <input type="file" name="file" id="exampleInputFile">
                        </div>

                    </div>
                    <span>选择标签:</span>
                    <div class="checkbox">
                        <label th:each="tag:${tags}" class="col-sm-2 control-label">
                            <input name="tags" th:checked="${oldTags.contains(tag.getId())?'true':'false'}" type="checkbox" th:value="${tag.getId()}">
                            <span th:text="${tag.getName()}"></span>
                        </label>
                    </div>
                    <div class="row">
                        <div id="layout">

                            <div id="test-editormd">
<textarea name="content" th:text="${article==null?'':article.getContent()}" >

</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row text-right" style="margin-right: 1em">
                        <input type="submit" class="btn btn-success" style="width: 5em">
                    </div>
                </form>
            </div>
        </main>
    </div>
</div>
</div>

</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>
<script type="text/javascript">
var testEditor;

$(function () {
    testEditor = editormd("test-editormd", {
        width: "90%",
        height: 600,
        syncScrolling: "single",
        //图片上传
        //watch: false,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/user/upload",
        onload: function () {
            console.log('onload', this);
        },
        path: "/editormd/lib/"
    });
});
</script>


</body>
</html>